<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="">
    <title>星趣米娱-管理后台</title>
    <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <link rel="stylesheet" href="__STATIC__/layui/dist/css/layui.css">
    <link rel="stylesheet" href="__STATIC__/css/my.css">
    <link rel="stylesheet" id="theme" type="text/css">
    <link rel="shortcut icon" href="">
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-cyan" id="my-header">
        <div class="layui-bottom layui-bottom-cyan" id="my-bottom"></div>
        <div class="layui-logo"><a href='{:url("Index/index")}'>星趣米娱 后台管理</a></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" id="topMenu">
            {volist name="topMenu" id="vo"}
                <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon">{$vo.icon}</i>&nbsp;&nbsp;{$vo.title}</a></li>
            {/volist}
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" id="lockScreen"><i class="layui-icon">&#xe614;</i> 锁屏</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">系统管理</a>
                <dl class="layui-nav-child" id="systemNotice">
                    <!--<dd><a href="javascript:;" id="news">系统公告</a></dd>-->
                    <dd><a href="javascript:;" id="history">更新历史</a></dd>
                    <dd><a href="javascript:;" id="feedback">问题收集</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">更换主题</a>
                <dl class="layui-nav-child" id="changeTheme">
                    <dd><a href="javascript:;" data-href="__STATIC__/css/cyan.css">默认</a></dd>
                    <dd><a href="javascript:;" data-href="__STATIC__/css/blue.css">蓝色</a></dd>
                    <dd><a href="javascript:;" data-href="__STATIC__/css/white.css">黑色</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><img src="__STATIC__/img/xqmy.jpg" class="layui-nav-img"></a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人信息</a></dd>
                    <dd><a href='{:url("Index/quit")}'>溜了溜了</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side">
        <div class="layui-side-scroll" id="leftMenu">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->

            {volist name="leftMenu" id="vo"}
                <ul class="layui-nav layui-nav-tree layui-bg-cyan my-left">
                    {volist name="vo.data" id="voo"}
                        <li class="layui-nav-item">
                            {empty name="voo.children"}
                                <a class="my-side-li" title="{$voo.title}" my-url="{:url($voo.url)}"><i class="layui-icon">{$voo.icon}</i>&nbsp;&nbsp;{$voo.title}</a>
                            {else /}
                                <a href="javascript:;"><i class="layui-icon">{$voo.icon}</i>&nbsp;&nbsp;{$voo.title}</a>

                                <dl class="layui-nav-child">
                                    {volist name="voo.children" id="vooo"}
                                        <dd>
                                            <a class="my-side-li" title="{$vooo.title}" my-url="{:url($vooo.url)}">{$vooo.title}</a>
                                        </dd>
                                     {/volist}
                                </dl>
                            {/empty}
                        </li>
                    {/volist}
                </ul>
            {/volist}
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab my-tab" lay-filter="my-tab" lay-allowClose="true">
            <ul class="layui-tab-title my-tab-title">
                <li class="layui-this" lay-id="123">后台首页</li>
            </ul>
            <div class="layui-tab-content my-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe class="my-iframe" name="my-iframe" src="{:url('Index/welcome2')}"></iframe>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="layui-footer">-->
        <!--&lt;!&ndash; 底部固定区域 &ndash;&gt;-->
        <!--© www.miyuhaiwai.com - 星趣米娱-->
    <!--</div>-->
</div>
<style>
    /*.my-tab-title .layui-this {border:1}*/
</style>
<script src="__STATIC__/layui/dist/layui.js"></script>
<script>
    layui.config({
        base: '__STATIC__/js/model/' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
        ,version: true //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610
        ,debug: true //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
    }).extend({
        demo: 'demo' //如果test.js是在根目录，也可以不用设定别名
        ,common: 'common'
    });

    layui.use(['element','demo','jquery','layer'], function(){
        var element = layui.element
            ,$ = layui.jquery
            ,layer = layui.layer
            ,index = ''
            ,demo = layui.demo;

        $('body').on('click', '.my-tab-title li', function() {
            if($(this).index() == 0){
                $(".my-iframe:first")[0].contentWindow.openTime();
            }else{
                $(".my-iframe:first")[0].contentWindow.clearTime();
            }
        })

        element.on('tabDelete(my-tab)', function(data){
            if($('.my-tab-title li').length == 1){
                $(".my-iframe:first")[0].contentWindow.openTime();
            }
        });

        $('.my-side-li').on('click', function(){
            $(".my-iframe:first")[0].contentWindow.clearTime();

            var layStr = '';
            $('.layui-tab-title li').each(function(){
                layStr += $(this).attr('lay-id') + ',';
            });
            if(layStr.indexOf($(this).attr('lay-id'))!=-1){
                element.tabChange('my-tab', $(this).attr('lay-id'));
            }else{
                var round = new Date().getTime();
                $(this).attr('lay-id', round);
                element.tabAdd('my-tab', {
                    title: $(this).attr('title')
                    ,content: '<iframe src="'+$(this).attr('my-url')+'" name="my-iframe" class="my-iframe" lay-filter="my-iframe" scrolling="yes"></iframe>'
                    ,id: round
                })
                element.tabChange('my-tab', round);
            }
        })

        $('#leftMenu ul:not(":first")').css('display', 'none');
        $('#topMenu li').on('click', function(){
            $('#leftMenu ul').eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
        })

        $('#topMenu li:eq(0)').addClass('layui-this');

        //更换主题
        $('#changeTheme dd a').click(function(){
            var href = $(this).attr('data-href');
            $("#theme").attr("href", href);

            layui.data('theme', {key: 'href',value: href});
        })

        //主题缓存
        if(layui.data('theme').href != undefined){
            $("#theme").attr("href", layui.data('theme').href);
        }else{
            $("#theme").attr("href", "__STATIC__/css/cyan.css");
        }

        //锁屏
        $('#lockScreen').click(function(){
            layui.data('lock', {key: 'on',value: true});
            lock();
        })
        if(layui.data('lock').on != undefined){
            lock();
        }
        function lock(){
            index = layer.open({
                type: 2,
                area: ['370px', '220px'],
                closeBtn: 0,
                title: false,
                content: '{:url("Index/lock")}',
            });
        }

        //问题反馈
        $('#feedback').click(function(){
            layer.prompt({
                formType: 2,
                value: '可以输入您对星趣米娱后台的建议，系统人员将会对此进行调整',
                title: '问题反馈',
                area: ['800px', '350px'] //自定义文本域宽高
            }, function(value, index, elem){
                layer.msg('后续将会开放该功能，请耐心等待', {icon: 3, time:2000})
                layer.close(index);
            });
        })

        //更新历史
        $('#history').click(function(){
            index = layer.open({
                type: 2
                ,resize: true
                ,title: '更新历史'
                ,area: ['70%', '70%']
                ,content: '{:url("Index/history")}'
            });
        })
    });
</script>
</body>
</html>
